<template>
  <div class="mod-admin__education">
    <div class="top-search">
      <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()" label-position="top">
        <div class="top-search_form">
          <div class="ttop-search_form_input">
            <el-form-item :label="$t('alumnus.name')">
              <el-input v-model="state.dataForm.name" :placeholder="$t('input')" clearable></el-input>
            </el-form-item>
          </div>
          <div class="top-search_form_btn">
            <el-form-item>
              <el-button @click="state.getDataList()">{{ $t("reset") }}</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="state.getDataList()">{{ $t("query") }}</el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>
    </div>
    <div class="content">
      <div class="content-btns">
        <el-button type="primary" @click="addOrUpdateHandle()">{{ $t("add") }}</el-button>
        <!-- <el-button v-if="state.hasPermission('sys:user:export')" type="info" @click="state.exportHandle()">{{
          $t("import") }}</el-button> -->
      </div>
      <el-table v-loading="state.dataListLoading" :data="state.dataList" @sort-change="state.dataListSortChangeHandle"
        style="width: 100%;height: calc(100vh - 390px);">
        <el-table-column prop="name" :label="$t('alumnus.name')" sortable="custom" header-align="center"
          align="center"></el-table-column>
        <el-table-column prop="gender" :label="$t('student.gender')" sortable="custom" header-align="center"
          align="center">
          <template v-slot="scope">
            <el-tag type="primary" v-if="scope.row.gender === 1">
              {{ state.getDictLabel("gender", scope.row.gender) }}
            </el-tag>
            <el-tag type="danger" v-else-if="scope.row.gender === 0">
              {{ state.getDictLabel("gender", scope.row.gender) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="mobile" :label="$t('alumnus.mobile')" sortable="custom" header-align="center"
          align="center"></el-table-column>
        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
          <template v-slot="scope">
            <el-button v-if="state.hasPermission('sys:user:update')" type="primary" link
              @click="addOrUpdateHandle(scope.row.id)">{{ $t("update") }}</el-button>
            <el-button v-if="state.hasPermission('sys:user:delete')" type="primary" link
              @click="state.deleteHandle(scope.row.id)">{{ $t("delete") }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit"
        :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle"
        @current-change="state.pageCurrentChangeHandle">
      </el-pagination>
    </div>

    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update ref="addOrUpdateRef" @refreshDataList="state.getDataList"></add-or-update>
  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import { reactive, ref, toRefs, onMounted } from "vue";
import AddOrUpdate from "./alumnus-add-or-update.vue";
import { ElMessageBox, ElMessage } from 'element-plus';
import { useI18n } from 'vue-i18n'
import baseService from "@/service/baseService";
const { t } = useI18n();

const view = reactive({
  getDataListURL: "/data/personnel/alumnus/page",
  getDataListIsPage: true,
  deleteURL: "/data/personnel/alumnus",
  deleteIsBatch: true,
  exportURL: "/sys/user/export",
  dataForm: {
    name: ""
  },
  deptList: ""
});

const defaultProps = reactive({
  children: 'children',
  label: 'name'
})

const state = reactive({ ...useView(view), ...toRefs(view) });

onMounted(() => {
  getDeptList()
})

const getDeptList = () => {
  return baseService.get("/school/dept/list").then((res) => {
    if (res.code !== 0) {
      return ElMessage.error(res.msg);
    }
    state.deptList = res.data;
  });
}

const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
  addOrUpdateRef.value.init(id);
};

const treeRef = ref()

const nodeClick = () => {
  const node = treeRef.value.getCurrentNode();
  console.log(node)
}

</script>
<style lang="less" scoped>
.top-search {
  background-color: #fff;
  padding: 20px 30px 10px;
  border-radius: 10px;
  display: flex;

  /deep/ .el-form {
    width: 100%;
  }

  &_form {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    &_btn {
      display: flex;
    }
  }
}

.content {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  margin: 15px 0 0;

  .school-name {
    font-size: 18px;
    font-weight: bold;
    padding: 10px 0;
  }

  &-btns {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 20px;
  }
}
</style>